<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="考核时间：">
        <el-date-picker style="width: 150px;" v-model="searchMonth" type="month" :editable="false" placeholder="选择月" value-format="yyyy-MM"></el-date-picker>
      </el-form-item>
      <el-form-item label="考评状态：">
        <el-select style="width: 150px;" v-model="searchStatus" placeholder="请选择">
          <el-option
            v-for="item in kpiStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="被考评人：">
        <el-tooltip class="item" effect="dark" :disabled="assessedUsersName.length === 0" :content="assessedUsersName" placement="bottom">
          <el-input style="width: 150px;" @click="selectDingUsers('assessedUsers', 'assessedUsersName')" placeholder="请选择人员" v-model="assessedUsersName" :disabled="true"></el-input>
        </el-tooltip>
      </el-form-item>
      <el-button @click="selectDingUsers('assessedUsers', 'assessedUsersName')" style="margin-right:15px;">选择</el-button>
      <el-form-item label="考评人：">
        <el-tooltip class="item" effect="dark" :disabled="assessUsersName.length === 0" :content="assessUsersName" placement="bottom">
          <el-input style="width: 150px;" @click="selectDingUsers('assessUsers', 'assessUsersName')" placeholder="请选择人员" v-model="assessUsersName" :disabled="true"></el-input>
        </el-tooltip>
      </el-form-item>
      <el-button @click="selectDingUsers('assessUsers', 'assessUsersName')" style="margin-right:15px;">选择</el-button>
      <el-form-item>
        <el-button type="primary" @click="searchList(true)" :loading="dataListLoading">查询</el-button>
        <el-button @click="resetSearch()">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :height="tableHeight" :data="myTableData" border style="width: 100%">
      <el-table-column label="序号" type="index" width="70" align="center"></el-table-column>
      <el-table-column label="被考评人" prop="dingName" width="90" align="center">
        <template slot-scope="scope">
          <span @click="filterList(2,scope.row)" style="color:#66b1ff;cursor:pointer;">{{scope.row.dingName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="部门" prop="department" width="120" align="center"></el-table-column>
      <el-table-column label="考核月份" prop="kpiDate" width="100" align="center"></el-table-column>
      <el-table-column label="考核类型" prop="kpiItemType" min-width="130" align="center"></el-table-column>
      <el-table-column label="考核内容" prop="kpiItemName" min-width="180" align="left" header-align="center"></el-table-column>
      <el-table-column label="考核关键点" prop="kpiItemKey" min-width="180" align="left" header-align="center">
        <template slot-scope="scope">
          <div style="white-space: pre-line;">{{scope.row.kpiItemKey}}</div>
        </template>
      </el-table-column>
      <el-table-column label="考核参考指标" prop="kpiItemIndex" min-width="180" align="left" header-align="center">
        <template slot-scope="scope">
          <div style="white-space: pre-line;">{{scope.row.kpiItemIndex}}</div>
        </template>
      </el-table-column>
      <el-table-column label="考评人" prop="scoresGiverName" width="90" align="center">
        <template slot-scope="scope">
          <span @click="filterList(1,scope.row)" style="color:#66b1ff;cursor:pointer;">{{scope.row.scoresGiverName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="评分" prop="kpiItemIndex" width="90" align="center">
        <template slot-scope="scope">
          {{scope.row.scores !== '' ? scope.row.scores + '分' : '未评分'}}
          <el-tooltip v-if="scope.row.scores !== ''" placement="bottom" effect="light">
            <div slot="content">
              {{scope.row.remark}}
            </div>
            <span style="color:#66b1ff;cursor:pointer;"><i class="el-icon-tickets"></i></span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center" header-align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status === 2 && scope.row.scores === '' " @click="openChangeDialog(scope.row)" type="text" size="small">变更评分人</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="myPageConfig.pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="myPageConfig.pageSize"
      :total="myPageConfig.totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <el-dialog title="变更评分人" :visible.sync="changeDialog" width="600px"> 
      <el-form :model="form" style="padding-right:100px;">
        <el-form-item label="原评分人：" :label-width="formLabelWidth">
          <el-input type="text" disabled v-model="form.oldName"></el-input>
        </el-form-item>
        <el-form-item label="新评分人：" :label-width="formLabelWidth">
          <span v-if="reAssessUserName" @click="selectDingUsers('reAssessUser','reAssessUserName')" style="color:#66b1ff;cursor:pointer;">{{reAssessUserName}}</span>
          <el-button v-if="!reAssessUserName" @click="selectDingUsers('reAssessUser','reAssessUserName')" style="margin-right:15px;">选择</el-button>
        </el-form-item>
        <el-form-item label="全部变更：" :label-width="formLabelWidth">
          <el-radio v-model="checkAll" :label="false">否</el-radio>
          <el-radio v-model="checkAll" :label="true">是</el-radio>
        </el-form-item>
        <p class="notice">注：一旦发生变更，原评分人的评分任务将会被取消。</p>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changeDialog = false">取 消</el-button>
        <el-button type="primary" @click="reAssess">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import dingMixin from  '@/mixins/ding'
  import * as dd from 'dingtalk-jsapi'
  
  export default {
    data() {
      return {
        dataListLoading: false,
        changeDialog: false,
        checkAll: false,
        searchMonth:'',
        kpiStatus: [{
          value: '',
          label: '全部'
        }, {
          value: true,
          label: '已评分'
        }, {
          value: false,
          label: '未评分'
        }],
        searchStatus: '',
        myTableData: [],
        form: {
          oldName: 1,
          scoreId: '',
          dingId: '',
          oldId: ''
        },
        myPageConfig:{
          pageIndex: 1,
          pageSize: 10,
          totalPage: 0
        },
        formLabelWidth: '120px',
        assessUsers: [],
        assessedUsers: [],
        assessUsersName: '',
        assessedUsersName: '',
        reAssessUser: [],
        reAssessUserName: '',
        tableHeight: window.tableHeight
      };
    },
    mixins: [dingMixin],
    created() {
      if (dd.env.platform!="notInDingTalk") {
        this.run_dd_config();
        if(this.userInfo && this.userInfo.dingId && this.dingConfig.corpId && this.$cookie.get('token')>'') {
          return;
        }
        this.getDingConfig().then(config =>{
          this.dingConfig = config;
          this.dingLogin(config.corpId, null);
        })
      }
    },
    activated() {
      this.tableHeight = document.documentElement['clientHeight'] - 290
      window.onresize = () => {
        this.tableHeight = document.documentElement['clientHeight'] - 290
      }
    },
    mounted() {
      this.searchList(true);
    },
    methods: {
      openChangeDialog(row) {
        this.changeDialog = true;
        this.reAssessUser = [];
        this.reAssessUserName = '';
        this.form.oldName = row.scoresGiverName;
        this.form.oldId = row.scoresGiverId;
        this.form.scoreId = row.scoreId;
        this.checkAll = false;
      },
      reAssess() {
        if(this.reAssessUser.length === 0) return this.$message.error('还未选择评分人')
        if(this.form.oldId === this.reAssessUser[0]) return this.$message.error('评分人相同,不需要变更')
        this.$http({
          url: this.$http.adornUrl('/kpi/scores/editGiver'),
          method: 'post',
          params: this.$http.adornParams({
            dingId: this.reAssessUser[0],
            scoreId: this.form.scoreId,
            checkAll: this.checkAll
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$notify({
              title: '成功',
              message: '变更成功',
              type: 'success'
            });
            this.searchList();
          }else {
            this.$message.error(data.msg)
          }
        }).finally(() => {
          this.changeDialog = false;
        })
      },
      filterList(type, item) {
        if(type === 1) {
          this.assessUsersName = item.scoresGiverName;
          this.assessUsers = [item.scoresGiverId];
          this.assessedUsersName = '';
          this.assessedUsers = [];
        }else if(type === 2) {
          this.assessedUsersName = item.dingName;
          this.assessedUsers = [item.dingId];
          this.assessUsersName = '';
          this.assessUsers = [];
        }
        this.searchList(true);
      },
      resetSearch() {
        this.searchMonth = '';
        this.assessUsersName = '';
        this.assessedUsersName = '';
        this.assessUsers = [];
        this.assessedUsers = [];
        this.searchStatus = ''
      },
      selectDingUsers(arr, showName){
        this.complexPicker(1, [], this[arr]).then((data)=>{
          this[arr] = [];
          let names = '';
          data.forEach((item, idx) => {
            names+= item.name;
            this[arr].push(item.emplId)
            if(idx !== (data.length - 1)) names += ','
          })
          this[showName] = names;
        })
      },
      sizeChangeHandle (val) {
        this.myPageConfig.pageSize = val
        this.searchList(true)
      },
      currentChangeHandle (val) {
        this.myPageConfig.pageIndex = val
        this.searchList()
      },

      searchList(init) {
        if(init) this.myPageConfig.pageIndex = 1;
        this.$http({
          url: this.$http.adornUrl('/kpi/scores/getKpiScoresLogs'),
          method: 'post',
          params: this.$http.adornParams({
            'kpiDate': this.searchMonth,
            'page': this.myPageConfig.pageIndex,
            'hasDone': this.searchStatus,
            'limit': this.myPageConfig.pageSize,
            'beRateId': this.assessedUsers.join(','),
            'scoresGiverId': this.assessUsers.join(',')
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.myTableData = data.data.list;
            this.myPageConfig.totalPage = data.data.totalCount;
          }
        })
      },
    }
  };
</script>
<style lang="scss" scoped>
  .notice{
    margin-top:10px;
    color:red;
    padding-left:120px;
  }
</style>